<template>
    <div>
        <van-cell-group inset>
            <van-cell
                    center
                    border
                    is-link
                    title="头像"
                    value="内容">
                <template #default>
                    <van-uploader :after-read="afterRead">
                        <van-image round width="55" height="55" :src="user.headPorait">
                            <template v-slot:error>加载失败</template>
                        </van-image>
                    </van-uploader>

                </template>
            </van-cell>
            <van-cell
                    border
                    is-link
                    title="用户名"
                    :value="user.username"
            />
            <van-cell
                    border
                    is-link
                    title="手机号"
                    @click="showTelSheet=true"
                    center
            >
                <template #default>
                    <span v-if="!showEditMobile">{{user.mobile}}</span>
                    <van-field
                            v-model="user.mobile"
                            border
                            placeholder="请输入手机号"
                            :clearable="true"
                            v-else
                            @touchstart.native.stop.prevent="showKeyboard = true"/>
                </template>
            </van-cell>
            <van-cell
                    border
                    is-link
                    title="性别"
                    :value="user.sex"
                    @click="showSexSheet=true"
            />
            <van-cell
                    border
                    is-link
                    title="默认收货地址"
                    :value="deskName"
                    @click="showDesk=true"
            />
            <van-cell
                    border
                    is-link
                    title="我的订单"
                    to="/myOrder"
            />
        </van-cell-group>
        <!--修改性别-->
        <van-action-sheet
                v-model="showSexSheet"
                :actions="sexActions"
                cancel-text="取消"
                close-on-click-action
                @select="editUserSex"
        />
        <!--修改手机号-->
        <van-action-sheet
                v-model="showTelSheet"
                :actions="telActions"
                cancel-text="取消"
                @select="editMobile"
                close-on-click-action
        />

            <!--默认键盘-->
            <van-number-keyboard
                    v-model="user.mobile"
                    :show="showKeyboard"
                    :maxlength="11"
                    @blur="showKeyboard = false"
                    @hide="keyBoardHide"
            />
        <!--选择餐桌-->
        <van-popup v-model="showDesk" round position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @cancel="showDesk = false"
                    @confirm="editDeskName"
            />
        </van-popup>
        <div style="margin: 16px;">
            <van-button to="login" round block type="danger">退出登录</van-button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "PersonalCenter",
        computed:{
            deskName(){
                return this.$store.state.deskName;
            },
            //用户标识
            userID(){
              return sessionStorage.getItem("userID");
            }
        },
        data(){
            return {
                showSexSheet:false,
                showTelSheet:false,
                showEditMobile:false,
                showKeyboard:false,
                showDesk:false,
                showHeader:false,
                sexActions:[{ name: '男' }, { name: '女' }],
                telActions:[{name:'修改'}],
                user:{
                    username:'',
                    name:'',
                    sex:'',
                    mobile:"",
                    headPorait:""
                },
                columns: ['一号桌', '二号桌', '三号桌', '四号桌', '五号桌', '六号桌', '七号桌', '八号桌']
            }
        },
        created() {
            this.getUserInfo();
        },
        methods:{
            //编辑性别
            editUserSex(action){
               this.user.sex=action.name;
               this.editUserInfo()
            },
            //修改手机号
            editMobile(action){
                this.showEditMobile=true;
                this.showKeyboard=true;
            },
            //键盘收起
            keyBoardHide(){
                this.showEditMobile=false;
                this.showKeyboard=false;
                this.editUserInfo();
            },
            //编辑餐桌
            editDeskName(deskName){
                sessionStorage.setItem("deskName",deskName);
                this.$store.commit('updateDeskName',deskName);
                this.showDesk=false;
            },
            //获取用户信息
            async getUserInfo(){
              const {data:res}=await this.$http.get("/user/user/"+this.userID);
              if (res.status!=200)return;
              this.user=res.data;
            },
            //上传头像文件
           async afterRead(file){
                //创建表单对象
               let formData= new FormData();
                console.log(file.file)
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }
                formData.append("uploadFile",file.file);
               const{data:res}=await this.$http.post("/common/uploadFile",formData,config);
               await this.$http.post("/user/uploadUserHeaderImg",{uid:this.userID,imageUrl:res.data})
               await this.getUserInfo();
            },
            //修改用户信息
           async editUserInfo(){
               const{data:res}=await this.$http.put("/user/updateUser",this.user);
               if (res.status!=200)return;
            }
        }
    }
</script>

<style scoped>

</style>
